import React from "react";
import { TabBar } from "antd-mobile";
import { EyeOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";

/**
 * @description 音乐播放器底部导航栏组件，导航栏数据整合在组件内
 */
function BaseTabBar(){
  /// 生成路由对象 支持跳转
  const navigate = useNavigate();
  const tabList = [
    {
      key: "/",
      title: "发现音乐",
      icon: <EyeOutline />,
    },
    {
      key: "/my-music",
      title: "我的音乐",
      icon: <EyeOutline />,
    },
    {
      key: "/my-frinds",
      title: "朋友",
      icon: <EyeOutline />,
    },
    {
      key: "/my-admin",
      title: "账号",
      icon: <EyeOutline />,
    },
  ];
  function _tabBarChange(key){
    navigate(key, {replace: false})
  }

  return (
    <div className="bottom-tabbar">
      <TabBar onChange={_tabBarChange}>
        {tabList.map((item) => (
          <TabBar.Item
            key={item.key}
            icon={item.icon}
            title={item.title}
          ></TabBar.Item>
        ))}
      </TabBar>
    </div>
  );
}


export default BaseTabBar;
